// import { Metadata } from 'next';
import { BytemdViewer } from '@/components/bytemd';
import { Wrapper } from '@/components/wrapper';

import { PATHS, PATHS_MAP } from '@/constants';

// export const metadata: Metadata = {
//     title: PATHS_MAP[PATHS.SITE_LINKS],
//     description: '友情链接，欢迎交换友链～'
// };

interface FriendLink {
    name: string;
    description: string;
    url: string;
}

const friendLinks: FriendLink[] = [
    {
        name: 'Corey Chiu',
        description: '独立开发者、内容创作者',
        url: 'https://coreychiu.com',
    },
    {
        name: 'W2Solo',
        description: '独立开发者',
        url: 'https://w2solo.com/',
    },
    {
        name: '陈随易',
        description: '农村程序员、独立开发者',
        url: 'https://me.yicode.tech',
    },
    {
        name: 'justin3go',
        description: 'Indie Hacker',
        url: 'https://justin3go.com',
    },
    {
        name: 'liruifengv',
        description: 'Web 开发者，Astro 项目成员，开源爱好者',
        url: 'https://liruifengv.com',
    },
    {
        name: '小白龙',
        description: '全栈开发工程师，热衷于探索前后端技术',
        url: 'https://xiaolong0418.com',
    },
];

const myInfo = `
\`\`\`json
{
    "name": "Immerse | 姚利锋",
    "description": "独立开发者、内容创作者、AGI实践者",
    "url": "https://yaolifeng.com",
    "avatar": "https://yaolifeng.com/avatar.png",
    "email": "yaolifeng666.com",
    "wechat": "immtalks",
    "github": "https://github.com/yaolifeng0629",
    "twitter": "https://twitter.com/Immerse_code"
}
\`\`\`
`;

export default function LinksPage() {
    return (
        <Wrapper className="flex flex-col px-6 pb-24 pt-8">
            <h2 className="text-3xl font-bold md:text-4xl mb-4">友情链接</h2>
            <p className="text-muted-foreground mb-8">欢迎各位小伙伴交换友链～</p>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 not-prose">
                {friendLinks.map((link, index) => (
                    <a
                        key={index}
                        href={link.url + '?utm_source=yaolifeng.com'}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="group block w-full rounded-xl border border-border bg-card hover:bg-accent/50 transition-all duration-300 p-4 hover:shadow-lg hover:-translate-y-1 hover:border-primary/20"
                    >
                        <div className="flex flex-col h-full">
                            <div className="flex items-start justify-between">
                                <div className="font-semibold text-lg text-foreground group-hover:text-primary transition-colors line-clamp-1">
                                    {link.name}
                                </div>
                                <div className="text-muted-foreground group-hover:translate-x-1 group-hover:text-primary transition-all duration-300 flex-shrink-0 ml-2">
                                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path
                                            strokeLinecap="round"
                                            strokeLinejoin="round"
                                            strokeWidth={2}
                                            d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
                                        />
                                    </svg>
                                </div>
                            </div>
                            <div className="text-sm text-muted-foreground group-hover:text-foreground transition-colors !mb-0">
                                {link.description}
                            </div>
                        </div>
                    </a>
                ))}
            </div>
            <h2 className="text-xl font-bold md:text-2xl mb-6 mt-10">添加我的友链</h2>
            <BytemdViewer body={myInfo} />
        </Wrapper>
    );
}
